openlayers |
您所在的位置：网站首页 › openlayers webgl filter › openlayers |
|
在地图上添加标注，大概分为三步 1.实例化map对象。2.创建用于放置标注的矢量图层以及图层源。3.实例化矢量标注对象并添加到矢量图层源。以上顺序也可以进行调整，可以先实例化标注对象，在实例化矢量图层时直接将 标注对象放在矢量图层源的features属性中，而不是调用addFeature()方法，后期进行添加。同理，在实例化map对象时，直接将矢量图层添加到map对象的layers属性中，而不是在后面调用map的addLayer()方法添加图层。 加载天地图 #mapCon { width: 100%; height: 100%; } var key = "4689fc6b9bc0fdc8c48298f751ebfb41";//天地图密钥 var center = [116.3913,39.9071];//北京经纬度 //ol.layer.Tile：是一个瓦片图层类，用于显示瓦片资源。 //source是必填项，用于为图层设置来源。 //ol.source.XYZ: //创建天地图矢量图层 var TiandiMap_vec = new ol.layer.Tile({ title: "天地图矢量图层", source: new ol.source.XYZ({ url: "http://t{0-7}.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=" + key, wrapX: false }) }); //创建天地图矢量注记图层 var TiandiMap_cva = new ol.layer.Tile({ title: "天地图矢量注记图层", source: new ol.source.XYZ({ url: "http://t{0-7}.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=" + key, }) }); //1. 实例化Map对象加载地图 var map = new ol.Map({ //地图容器div的ID target: 'mapCon', //地图容器中加载的图层 layers: [TiandiMap_vec, TiandiMap_cva], //地图视图设置 view: new ol.View({ //地图初始中心点（经纬度） center: center, //地图初始显示级别 zoom: 8, projection: "EPSG:4326" }) }); //2.创建用于放置标注的矢量图层以及图层源 //矢量标注的数据源 var vectorSource = new ol.source.Vector(); //矢量标注图层 var vectorLayer = new ol.layer.Vector({ source: vectorSource, zIndex:1000, }); map.addLayer(vectorLayer); //3.实例化矢量标注对象并添加到矢量图层源 var markerFeature = new ol.Feature({ geometry: new ol.geom.Point(center), name:'北京', }); markerFeature.setStyle(createMarkerStyle(markerFeature)); //将新要素添加到数据源中 vectorSource.addFeature(markerFeature); //创建矢量标注样式 function createMarkerStyle(feature) { return new ol.style.Style({ /**{olx.style.IconOptions}类型*/ image: new ol.style.Icon( ({ // anchor: [0.5, 0.5],//图标的锚点,经纬度点所对应的图标的位置，默认是[0.5, 0.5]，即为标注图标的中心点位置 anchorOrigin: 'top-right',//锚点的偏移位置，默认是top-left， anchorXUnits: 'fraction',//锚点X的单位，默认为百分比，也可以使用px anchorYUnits: 'pixels',//锚点Y的单位，默认为百分比，也可以使用px offsetOrigin: 'top-right',//原点偏移bottom-left, bottom-right, top-left, top-right,默认 top-left // offset:[0,10], //图标缩放比例 // scale:0.5,//可以设置该比例实现，图标跟随地图层级缩放 //透明度 opacity: 0.75,//如果想隐藏某个图标，可以单独设置该值，透明度为0时，即可隐藏，此为隐藏元素的方法之一。 //图标的url src: 'static/img/hq.png' }) ), text: new ol.style.Text({ //位置 textAlign: 'center', //基准线 textBaseline: 'middle', //文字样式 font: '20px 宋体', //文本内容 text: feature.get('name'),//通过设置的fature的name属性获取，也可以通过参数获取设置，此处接收 字符串 对象 //文本填充样式（即文字颜色），红色 fill: new ol.style.Fill({ color: '#ff002f' }), //描边颜色，蓝色 stroke: new ol.style.Stroke({ color: '#0022ff', width: 1 }) }) }); }示例代码 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |